<template>
  <div class="check">
    <div class="title">
      <div class="block"></div>
      <div class="word">
        方案查询
      </div>
      <div class="button">
        <el-button class="el-button"
                   @click="refresh">刷新</el-button>
      </div>
    </div>
    <div>
      <search :formInline="formInline" @getSearchList="getSearchList">
        <template>
          <div class="search-form">
            <!-- <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item class="el-form-item" label="学生信息 :">
                <el-input
                  class="el-input"
                  v-model="formInline.user"
                  placeholder="学生信息"
                ></el-input>
              </el-form-item>
              <el-form-item label="学历 :">
                <el-select
                  class="el-select"
                  v-model="formInline.region"
                  placeholder="请选择学历"
                >
                  <el-option label="本科" value="undergraduate"></el-option>
                  <el-option label="大专" value="college"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="希望就读 :">
                <el-select
                  class="el-select"
                  v-model="formInline.hopemajor"
                  placeholder="请选择专业"
                >
                  <el-option label="软件工程" value="software"></el-option>
                  <el-option label="计算机科学" value="cs"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="入学阶段 :">
                <el-select
                  class="el-select"
                  v-model="formInline.year"
                  placeholder="请选择入学阶段"
                >
                  <el-option label="2021" value="first"></el-option>
                  <el-option label="2022" value="second"></el-option>
                  <el-option label="2023" value="third"></el-option>
                </el-select>
              </el-form-item>
            </el-form> -->
            <el-form :inline="true"
                     :model="formInline"
                     class="demo-form-inline">
              <el-form-item class="el-form-item"
                            label="学校名称 :">
                <el-input class="el-input"
                          v-model.trim="formInline.schoolName"
                          placeholder="中文名称、英文名称"></el-input>
              </el-form-item>
              <el-form-item label="专业名称:">
                <el-input class="el-input"
                          v-model.trim="formInline.majorName"
                          placeholder="中文名称、英文名称">
                </el-input>
              </el-form-item>
              <el-form-item label="学制 :">
                <el-input class="el-input"
                          v-model.trim="formInline.years"
                          placeholder="请输入学制">
                </el-input>
              </el-form-item>
            </el-form>
                        <el-form :inline="true"
                     :model="formInline"
                     class="demo-form-inline">
              <el-form-item label="学费 :">
                <el-input class="el-input"
                          v-model.trim="formInline.m1"
                          placeholder="">
                </el-input>
              </el-form-item>
              <el-form-item>
                -
              </el-form-item>
              <el-form-item>
                <el-input class="el-input"
                          v-model.trim="formInline.m2"
                          placeholder="">
                </el-input>
              </el-form-item>
            </el-form>
            <!-- <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="学费 :">
                <el-input
                  class="el-input"
                  v-model="m1"
                  placeholder=""
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                -
              </el-form-item>
              <el-form-item>
                <el-input
                  class="el-input"
                  v-model="m2"
                  placeholder=""
                >
                </el-input>
              </el-form-item>
            </el-form> -->
          </div>
        </template>
      </search>
    </div>
    <div>
      <datashow>
        <template v-slot:form>
          <div class="">
            <el-table class="el-table"
                      :data="tableData"
                      border
                      style="width: 100%">
              <el-table-column prop="schoolId"
                               label="编号"> </el-table-column>
              <el-table-column prop="school"
                               label="所属学校">
              </el-table-column>
              <el-table-column prop="majorCName"
                               label="专业中文名称">
              </el-table-column>
              <el-table-column prop="majorEName"
                               label="专业英文名称">
              </el-table-column>
              <el-table-column prop="educationalSystem"
                               label="学制">
              </el-table-column>
              <el-table-column prop="tuition"
                               label="学费/年">
              </el-table-column>
              <el-table-column prop="proportion"
                               label="国际生比例">
              </el-table-column>
              <el-table-column  
                                prop="operation"
                               label="操作">
                <template slot-scope="scope">
                  <el-button   @click="turnToSubjectList(scope.row)"
                             type="text"
                             size="small">查看</el-button>
                  <el-button s  type="text"
                             @click="turnToOverseaList(scope.row)"
                             size="small">立即申请</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </datashow>
    </div>  
    <div class="paging">
      <paging :total="total"
              @size="size"
              @currentpage="currentpage"></paging>
    </div>
  </div>
</template>

<script>
import search from '../../../component/search/search.vue'
import datashow from '../../../component/datashow/datashow.vue'
import paging from '../../../component/paging/paging.vue'
import { getPlanMajor } from '../../../api/index'
export default {
  inject: ['reload'],
  name: 'check',
  components: {
    search, //筛选查询组件
    datashow, //数据列表组件
    paging, //分页组件
  },
  // props:{
  //     tableData
  // },

  data () {
    return {
      current: '',
      pagesize: '',
      total: 0,//一共多少条数据
      formInline: {
        schoolName: '', //学校名称
        majorName: '', //专业名称
        years: '', //学制
        m1: '', //最低学费
        m2: '', //最高学费
      },
      tableData: [],
    }
  },

  mounted () {
    this.$emit('routeName', "check");
    this.getlist()
  },

  methods: {
    currentpage (val) {
      // console.log(val);
      this.current = val //得到新的当前页
      this.getlist() //获取新的数据列表
    },
    size (val) {
      // console.log(val);
      this.pagesize = val //得到新当前页的一共几行数据
      this.getlist() //获取新的数据列表
    },
    refresh () {
      this.reload()
    },
    onSubmit () {
      console.log('submit!')
    },
    handleClick (row) {
      console.log(row)
    },
    getlist () {
      getPlanMajor(this.current, this.pagesize, this.formInline.schoolName, 
        this.formInline.majorName, this.formInline.years, this.formInline.m1, this.formInline.m2).then(data => {
        console.log(data.data.records);
        this.tableData = data.data.records
        this.total = data.data.total
      });
    },
    getSearchList (val) { //点击查询获取新的数据列表
      this.getlist()
    },
    turnToSubjectList(val) {
      this.$router.push({
        name: "subjectList",
        params: {
          val: val
        },
      });
    },
    turnToOverseaList(val) {
      this.$router.push({
        name: "overseasList",
        params: {
          val: val
        },
      });      
    }
  },
}
</script>

<style scoped>
.title {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 100px;
  margin-left: 5px;
  color: #999999;
}
.button {
  position: absolute;
  right: 30px;
}
.el-input {
  /* width: 150px; */
}
.search-form {
  padding-top: 10px;
  padding-left: 10px;
}
.el-table {
  text-align: center;
}
/* 分页 */
.paging {
  margin-top: 20px;
  text-align: center;
}
/* 筛选查询 */
.demo-form-inline {
  width: 1500px;
}
</style>
